<template>
	<div class="wrap">
		<p class="title">
			<span class="tip">{{ msg }} ---> </span>
			<span class="path">{{ route.path }}</span>
		</p>
		<router-link to="/home">
			<el-button
				type="primary"
				size="small"
				>back homepage</el-button
			>
		</router-link>
	</div>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { useRoute } from "vue-router";
	const route = useRoute();

	const msg = ref("NotFound Pages");
</script>

<style lang="scss" scoped>
	@import "@/styles/var.scss";

	.wrap {
		padding: 10px;
		.title {
			.tip {
				font-weight: bold;
				color: $gray;
			}
			.path {
				color: $danger;
			}
		}
	}
</style>
